<template>
  <!-- 导航栏 -->
  
  <el-page-header @back="$router.back" title="返回上一级" class="topNAV">
    <template #content>
        <div style="display: flex;align-items: center;">
        <n-button @click="show = !show" type="primary" dashed>收起/打开目录</n-button>
        <div style="margin-left: 30px;">
          <img src="/src/assets/svg/h_h.svg">{{ title }}
        </div>
      </div>
    </template>
  </el-page-header>
  
  <!-- 主要内容 -->
  <div class="box">
    <!--目录-->
    <div v-show="show" class="MdCatalog">
      <MdCatalog :editorId="state.id" :scrollElement="scrollElement" :theme="state.theme" scrollElementOffsetTop:12 />
    </div>
    <!--内容-->
    <div class="Mdpreview">
      <MdPreview :id="state.id" :modelValue="state.text" :theme="state.theme" />
    </div>
  </div>

</template>

<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import { MdEditor, MdPreview, MdCatalog } from "md-editor-v3";
import { config } from "md-editor-v3";
import { useRouter } from "vue-router";
import "md-editor-v3/lib/style.css";
import hljs from "highlight.js"; //代码高亮
import "highlight.js/styles/atom-one-dark.css"; // 选择你喜欢的样式
import userHttp from "@/api/userHttp";
hljs.highlightAll();
const props = defineProps(['chapterId'])

const chapterId = props.chapterId
const title = ref("")
const state = reactive({
  text: "",
  catalogList: [],
  theme: "",
  id: "my-editor", //必须把目录和在线文本绑定在一起
});

//不知道有什么用
const scrollElement = document.documentElement;

const show = ref(true)

onMounted(() => {
  getEditorDataById()
})

//获取编辑器数据
const getEditorDataById = () => {
  userHttp.getEditorDataById(chapterId).then((res) => {
    if (res.code == 200) {
      console.log(res);
      state.text = res.data.content
      title.value = res.data.title
    }
  })
}

</script>

<style scoped>
.box {
  width: 100vw;
  display: flex;
}

.topNAV {
  height: 50px;
  padding: 10px;
  position: sticky;
  top: 0px;
  background-color: rgb(162, 243, 243, 0.1);
  z-index: 10000;
  display: flex;
  align-items: center;
}


.MdCatalog {
  flex: 2;
  margin-right: 5px;
  height: 100vh;
  position: sticky;
  top: 50px;
  /* 元素将粘在页面顶部 */
  user-select: none;
  /* 不允许选择文本 */
  padding: 10px;
  z-index: 10;
  /* 确保它覆盖其他内容 */
  overflow-y: auto;
  /* 超出内容时显示垂直滚动条 */
  color: rgb(67, 61, 54);
  /*字体颜色 */
  border-right: 1px solid rgba(159, 241, 136, 0.5);
}

.Mdpreview {
  flex: 7;
  margin-right: 10px;
}
</style>